<#import "../../../config/config.ftl" as config />
<#import "../../../template/template.ftl" as template />

<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>用户管理</title>

<@config.humaneCSS></@config.humaneCSS>
<@config.gcss></@config.gcss>
<@config.bootCSS></@config.bootCSS>
<@config.wavesCSS></@config.wavesCSS>
<@config.animateCSS></@config.animateCSS>
<@config.styleCSS></@config.styleCSS>
<@config.themesCSS></@config.themesCSS>
<@config.bootTableCSS></@config.bootTableCSS>
<@config.sweetalertCSS></@config.sweetalertCSS>
<@config.appCSS></@config.appCSS>
</head>
<body class="">
<@template.pageLoad></@template.pageLoad>
<div class="overlay"></div>
<@template.topBar></@template.topBar>
<section>

<@template.leftSidebar flag="user"></@template.leftSidebar>
    <@template.rightSidebar></@template.rightSidebar>
</section>
<section class="content">
    <div class="container-fluid">
        <div id="toolbar">
            <button type="button" class="btn btn-info waves-effect" onclick="doAdd();">新增</button>
        </div>
        <table id="userInfo">

        </table>
    </div>
</section>
<div class="modal fade middle-modal" id="userModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="defaultModalLabel">用户新增</h4>

            </div>
            <div class="modal-body">
                <div class="row clearfix">
                    <form id="userForm" method="POST">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <div class="form-line">
                                    <input type="text" class="form-control" placeholder="用户名" name="username" required
                                           id="username"/>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <div class="form-line">
                                    <input type="password" class="form-control" placeholder="密码" name="password"
                                           required id="password"/>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <div class="form-line">
                                    <div class="switch form-control">
                                        <label>女<input type="checkbox" checked name="sex" value="男" id="sex"><span
                                                class="lever switch-col-indigo"></span>男</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <div class="form-line">
                                    <input type="text" class="form-control" placeholder="姓名" name="name" required
                                           id="name"/>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <div class="form-line">
                                    <input type="text" class="form-control" placeholder="出生日期" id="birthday"
                                           name="birthday" required/>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <div class="form-line">
                                    <input type="text" class="form-control" placeholder="联系电话" name="mobile" required
                                           id="mobile"/>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <div class="form-line">
                                    <input type="text" class="form-control" placeholder="职位" name="position"
                                           id="position"/>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <div class="form-line">
                                    <input type="text" class="form-control" placeholder="办公电话" name="phone" required
                                           id="phone"/>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" name="id" value="0" id="id">
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-link waves-effect" id="exec" onclick="doExec();">保存</button>
                <button type="button" class="btn btn-link waves-effect" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<@template.footer></@template.footer>
<@config.jqueryJS></@config.jqueryJS>
<@config.jquerySerializeJsonJS></@config.jquerySerializeJsonJS>
<@config.bootJS></@config.bootJS>
<@config.jqueryFormJS></@config.jqueryFormJS>
<@config.bootSelectJS></@config.bootSelectJS>
<@config.jquerySrollJS></@config.jquerySrollJS>
<@config.bootTableJS></@config.bootTableJS>
<@config.wavesJS></@config.wavesJS>
<@config.laydateJS></@config.laydateJS>
<@config.layerJS></@config.layerJS>
<@config.jqueryCountToJs></@config.jqueryCountToJs>
<@config.jqueryValidateJS></@config.jqueryValidateJS>
<@config.humaneJS></@config.humaneJS>
<@config.sweetalertJS></@config.sweetalertJS>
<@config.adminJS></@config.adminJS>
<@config.demoJS></@config.demoJS>
<@config.appJS></@config.appJS>


<script type="application/javascript">
    var validator
    $(function () {
        $.App.home.loadPage({
            id: "userInfo",
            url: '${base}/sys/user/loadpage.json',
            columns: [
                {field: "username", title: "用户名"},
                {field: "name", title: "姓名"},
                {field: "mobile", title: "手机号码"},
                {field: "phone", title: "联系电话"},
                {field: "sex", title: "性别"},
                {field: "birthdayStr", title: "出生日期"},
                {field: "updateTimeStr", title: "修改时间"},
                {
                    field: "id", title: "操作", formatter: function (value, row, index) {
                    var btn = '<button type="button" class="btn bg-red btn-xs waves-effect" onclick="doRemove(' + value + ')">删除</button>&nbsp;<button type="button" class="btn bg-pink btn-xs waves-effect" onclick="doEdit(' + value + ')">编辑</button>&nbsp;<button type="button" class="btn bg-blue btn-xs waves-effect" onclick="doRole(' + value + ')">编辑角色</button>&nbsp;<button type="button" class="btn bg-cyan btn-xs waves-effect" onclick="doMenu(' + value + ')">编辑菜单</button>';
                    return btn;
                }
                }
            ],
            toolbar: "#toolbar",
            queryParams: function (params) {
                console.log("传输的参数: " + JSON.stringify(params));
                var obj = {
                    order: params.order,
                    offset: params.offset,
                    limit: params.limit,
                    obj: $.App.home.serializeForm("userForm")
                }
                return obj;
            }
        });
        laydate.render({
            elem: '#birthday' //指定元素
        });
        validator = $.App.home.validateForm("userForm");
        $('#userModal').on('hide.bs.modal', function () {
            $("#id").val(0);
            $.App.home.clearFormData("userForm");
        });
    });

    function doAdd() {
        $("#userModal").modal();
    }

    function doExec() {
        var valid = $("#userForm").valid();
        if (!valid) {
            return;
        }
        var id = $("#id").val();
        var url = "";
        if ("0" == id) {   //新增
            url = "${base}/sys/user/add.json";
        } else {
            url = "${base}/sys/user/update.json";
        }
        $("#userForm").ajaxSubmit({
            url: url,
            type: "post",
            success: function (resp) {
                if (resp.code == 200) {
                    console.info(JSON.stringify(resp));
                    $('#userModal').modal('hide')
                    $.App.home.topMessage("success", "操作成功");
                    $.App.home.reloadTable("userInfo");
                } else {
                    $.App.home.topMessage("error", resp.msg);
                }
            },
            error: function (resp) {
                $.App.home.topMessage("error", JSON.stringify(resp));
            }
        });
    }

    function doRemove(id) {
        $.App.home.showConfirmMessage("确定要删除用户信息吗？", doRemoveById, id);
    }

    function doRemoveById(id) {
        $.ajax({
            url: "${base}/sys/user/deletebyid.json",
            data: {id: id},
            success: function (resp) {
                if (resp.code == 200) {
                    $.App.home.showSuccessMessage();
                    $.App.home.reloadTable("userInfo");
                } else {
                    $.App.home.showErrorMessage();
                }
            },
            error: function () {
                $.App.home.showErrorMessage();
            }
        })
    }

    function doEdit(id) {
        $.ajax({
            url: '${base}/sys/user/getuserbyid.json',
            data: {id: id},
            success: function (resp) {
                if (resp.code == 200) {
                    doViewEdit(resp.data);
                } else {
                    $.App.home.showErrorMessage();
                }
            },
            error: function () {
                $.App.home.showErrorMessage();
            }
        })
    }

    function doViewEdit(data) {

        $("#username").val(data.username);
        $("#password").val(data.decryptPassword);
        //sex
        if ("男" == data.sex) {
            $("#sex").attr("checked", "checked")
        } else {
            $("#sex").attr("checked", false);
        }
        $("#name").val(data.name);

        $("#birthday").val(data.birthdayStr);

        $("#mobile").val(data.mobile);

        $("#position").val(data.position);

        $("#phone").val(data.phone);

        $("#id").val(data.id);

        $("#userModal").modal();
    }

    var treeLayerId='';
    function doMenu(id) {
        treeLayerId=  layer.open({
            type: 2,
            area: ['300px', '500px'],
            content: '${base}/sys/user/treemenu.htm?id='+id,
            title:"选择菜单"
        });
    }

    function closeWin(){
        layer.close(treeLayerId);
        $.App.home.topMessage("success", "操作成功");
    }
</script>


</body>
        